<html>
  <head>
    <title>SIMILE Widgets | Exhibit | Examples | MIT Nobel Prize Winners</title>
    <link rel='stylesheet' href='http://www.simile-widgets.org/styles/common.css' type='text/css' />

    <link href="nobelists.js" type="application/json" rel="exhibit/data" />

    <!-- Replace the URL here with http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js -->
    <script src="http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js"></script>

    
    <!-- Replace the URL here with http://api.simile-widgets.org/exhibit/2.2.0/extensions/time/time-extension.js -->
    <script src="http://api.simile-widgets.org/exhibit/2.2.0/extensions/time/time-extension.js" type="text/javascript"></script>
    
    <style>
        #main-content { background: white; }
        #title-panel { padding: 0.25in 0.5in; }
        #top-panels {
            padding:        0.5em 0.5in;
            border-top:     1px solid #BCB79E;
            border-bottom:  1px solid #BCB79E;
            background:     #FBF4D3;
        }
        
        .exhibit-tileView-body { list-style: none; }
        .exhibit-collectionView-group-count { display: none; }
        
        table.nobelist {
            border:     1px solid #ddd;
            padding:    0.5em;
        }
        div.name {
            font-weight: bold;
            font-size:   120%;
        }
        .relationship {
            color:  #888;
        }
        
        div.nobelist-thumbnail {
            float:      left;
            width:      13em;
            height:     10em;
            border:     1px solid #BCB79E;
            background: #F0FFF0;
            padding:    1em;
            margin:     0.5em;
            text-align: center;
        }
        div.nobelist-timeline-lens {
            padding:    1em;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        function deceaseRowStyler(itemID, database, tr, rowIndex) {
            var deceased = database.getObject(itemID, "deceased");
            if (deceased == "yes") {
                tr.style.backgroundColor = "#f88";
            }
        }
    </script>
  </head> 
  <body>
    <ul id="path">
      <li><a href="/">SIMILE Widgets</a></li>

      <li><a href="/exhibit/">Exhibit</a></li>
      <li><span>Examples: MIT Nobel Prize Winners</span></li>
    </ul>
    
    <div id="main-content">
        <div id="title-panel">
            <h1>63 MIT-related Nobel Prize Winners</h1>
            <p>The information within this page has been retrieved from
                <a href="http://web.mit.edu/newsoffice/special/nobels.html" target="_blank">this MIT official source</a>

                while the thumbnails are included from <a href="http://nobelprize.org/" target="_blank">Nobelprize.org</a>.
                Here is the <a href="nobelists.js" target="_blank">Exhibit JSON data file</a>.
            </p>
        </div>
    
        <div id="top-panels">
            <table width="100%"><tr>
                <td><div ex:role="facet" ex:expression=".discipline" ex:facetLabel="Discipline"></div></td>
                <td><div ex:role="facet" ex:expression=".relationship" ex:facetLabel="Relationship"></div></td>

                <td><div ex:role="facet" ex:expression=".shared" ex:facetLabel="Shared?"></div></td>
                <td><div ex:role="facet" ex:expression=".deceased" ex:facetLabel="Deceased?"></div></td>
            </tr></table>
        </div>
        <div ex:role="viewPanel" style="padding: 1em 0.5in;">
            <table ex:role="lens" class="nobelist" style="display: none;"><tr>
                <td><img ex:src-content=".imageURL" /></td>
                <td>
                    <div ex:content=".label" class="name"></div>

                    <div>
                        <span ex:content=".discipline" class="discipline"></span>, 
                        <i ex:content=".nobel-year"></i>
                    </div>
                    <div ex:if-exists=".co-winner" class="co-winners">
                        Co-winners: <span ex:content=".co-winner"></span>
                    </div>
                    <div ex:content=".relationship-detail" class="relationship"></div>
                </td>

            </tr></table>
        
            <div ex:role="view"
                ex:viewClass="Thumbnail"
                ex:showAll="true"
                ex:orders=".discipline"
                ex:possibleOrders=".label, .last-name, .discipline, .relationship, .shared, .deceased, .nobel-year">
                <div ex:role="exhibit-lens" class="nobelist-thumbnail" style="display: none;">
                    <img ex:src-content=".imageURL" />
                    <div><span ex:content=".label"></span></div>
                    <div>
                        <span ex:content=".discipline" class="discipline"></span>, 
                        <span ex:content=".nobel-year" class="year"></span>
                    </div>

                </div>
            </div>
            <div ex:role="view"
                ex:label="Details"
                ex:viewClass="Tile"
                ex:showAll="true"
                ex:orders=".discipline, .nobel-year"
                ex:possibleOrders=".label, .last-name, .discipline, .relationship, .shared, .deceased, .nobel-year">
            </div>
            <div ex:role="view"
                ex:viewClass="Timeline"
                ex:start=".nobel-year"
                ex:colorKey=".discipline"
                ex:bubbleWidth="150"
                ex:bubbleHeight="150">
                <div ex:role="lens" class="nobelist-timeline-lens" style="display: none;">
                    <img ex:src-content=".imageURL" />
                    <div><span ex:content=".label"></span></div>
                    <div>

                        <span ex:content=".discipline" class="discipline"></span>, 
                        <span ex:content=".nobel-year" class="year"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </body>
</html>